<template>
    <div class="calendar-content">
        <!-- 条件筛选卡片 -->
        <el-row class="calendar-query">
            <el-col :span="5">
                债券代码
                <el-select
                    v-model="STOCK_CODE"
                    filterable
                    clearable
                    remote
                    :remote-method="getBondCodeList"
                    @visible-change="handleBondCodeVisibleChange"
                    @clear="getBondCodeList('')"
                    :loading="selectLoading"
                    @change="changeStockCode"
                    size="mini"
                    style="width:70%;margin-left:5px"
                >
                    <el-option
                        v-for="item in bondCodeSelectData"
                        :key="item.dictKey"
                        :label="item.dictKey + ' ' + item.dictKeyName"
                        :value="item.dictKey"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="7" class="middle">
                <el-radio-group v-model="dateType" @change="changeDateType" class="radio-group">
                    <el-radio :label="'1'">按投标日期</el-radio>
                    <el-radio :label="'2'">按缴款日期</el-radio>
                    <el-radio :label="'3'">按上市日期</el-radio>
                </el-radio-group>
            </el-col>
            <el-col :span="1" class="middle">
                <el-button type="text" @click="quickFocus">快速关注</el-button>
            </el-col>
            <el-col :span="5" class="middle" style="margin-left:30px">
                展示月份
                <el-date-picker
                    v-model="monthValue"
                    :clearable="false"
                    @change="changeMonth"
                    format="yyyy年MM月"
                    default-time="monthValue"
                    type="month"
                    placeholder="选择月"
                    size="mini"
                    style="width:70%;margin-left:5px"
                >
                </el-date-picker>
            </el-col>
            <el-col :span="3" class="middle">
                <div class="switch-month">
                    <i class="el-icon-arrow-up btn" @click="changeMonthBtn('pre')"></i>
                    <i class="el-icon-arrow-down btn" @click="changeMonthBtn('next')"></i>
                </div>
            </el-col>
            <el-col :span="1" class="middle">
                <el-button type="text" @click="changeMonthBtn('today')">【返回当月】</el-button>
            </el-col>
        </el-row>
        <!-- 日历 -->
        <el-row type="flex" justify="space-between">
            <el-col :span="20">
                <el-calendar v-model="monthValue" style="position: relative">
                    <template slot="dateCell" slot-scope="{ data }">
                        <div @click="viewDayDetail(data, 'calendar')" :class="data.isSelected ? 'is-selected calendar-day' : 'calendar-day'">
                            <p>
                                {{ $moment(data.day).format('M月D日') }}
                            </p>
                            <div class="bond-number" v-for="item in monthData" :key="item.itemDate">
                                <div
                                    v-if="item.itemDate === $moment(data.day).format('YYYYMMDD')"
                                    class="bond-number-item"
                                    @click="handleAnchor('bid')"
                                >
                                    债券投标：<span>{{ item.bidStockNum || 0 }}只</span>
                                </div>
                                <div
                                    v-if="item.itemDate === $moment(data.day).format('YYYYMMDD')"
                                    class="bond-number-item"
                                    @click="handleAnchor('payIn')"
                                >
                                    债券缴款：<span>{{ item.payStockNum || 0 }}只</span>
                                </div>
                                <div
                                    v-if="item.itemDate === $moment(data.day).format('YYYYMMDD')"
                                    class="bond-number-item"
                                    @click="handleAnchor('ipo')"
                                >
                                    债券上市：<span>{{ item.marketStockNum || 0 }}只</span>
                                </div>
                                <el-popover
                                    placement="bottom"
                                    trigger="hover"
                                    popper-class="tips-popover"
                                    :open-delay="500"
                                    @show="getSingleStockAll(data.day)"
                                    @after-leave="hideSingle"
                                >
                                    <div slot="reference" class="follow-mark-box">
                                        <div class="follow-logo" v-for="(ele, idx) in item.stockCalendarFocusStocks" :key="0 + idx">
                                            <span
                                                v-if="
                                                    item.itemDate === $moment(data.day).format('YYYYMMDD') &&
                                                        item.stockCalendarFocusStocks.length > 0 &&
                                                        idx < 3
                                                "
                                            >
                                                【{{ ele.type === '1' ? '投标' : ele.type === '2' ? '缴款' : '上市' }}】{{
                                                    ele.stockName + '   ' + ele.stockCode
                                                }}<i class="iconfont yh-star-fill" style="color: #f31919;"></i>
                                            </span>
                                            <span
                                                v-else-if="
                                                    item.itemDate === $moment(data.day).format('YYYYMMDD') &&
                                                        item.stockCalendarFocusStocks.length > 0 &&
                                                        idx == 3
                                                "
                                                style="margin-left:10px"
                                            >
                                                ...
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <!-- v-loading="popLoading" -->
                                        <vxe-list
                                            element-loading-text="加载中"
                                            element-loading-spinner="el-icon-loading"
                                            element-loading-background="rgba(0, 0, 0, 0.8)"
                                            v-loading="popLoading"
                                            :data="popStockList"
                                        >
                                            <template #default="{ items }">
                                                <div class="my-list-item" v-for="item in items" :key="item.stockCode + item.inType">
                                                    <!-- <span>
                                                        【{{ item.type === '1' ? '投标' : item.type === '2' ? '缴款' : '上市' }}】{{
                                                            item.stockName + '   ' + item.stockCode
                                                        }}<i class="iconfont yh-star-fill" style="color: #f31919;"></i>
                                                    </span> -->
                                                    <span>{{ packageTooltip(item) }}</span>
                                                </div>
                                            </template>
                                        </vxe-list>
                                    </div>
                                </el-popover>
                            </div>
                        </div>
                        <i class="el-icon-arrow-left  calendar-arrow-left" @click.stop="changeMonthBtn('pre')"></i>
                        <i class="el-icon-arrow-right calendar-arrow-right" @click.stop="changeMonthBtn('next')"></i>
                    </template>
                </el-calendar>
            </el-col>
            <el-col :span="4" class="details">
                <p class="details-title" id="details-title">详情</p>
                <div id="details-content" class="details-content" v-loading="detailLoading" element-loading-background="rgba(255, 255, 255, 0.7)">
                    <p class="detail-date">
                        <span>{{ $moment(dayDetail['currentDay']).format('YYYY年MM月DD日') }}</span
                        >{{ $moment(dayDetail['currentDay']).format('dddd') }}
                    </p>
                    <vue-easy-tree
                        ref="tree"
                        :data="dayDetailShow"
                        node-key="key"
                        :filter-node-method="filterUnFocusNodes"
                        height="600px"
                        :default-expanded-keys="defaultExpandedKeys"
                        style="background:transparent"
                        :key="detailKey"
                    >
                        <span class="custom-tree-node" slot-scope="{ node }">
                            <!-- 一级节点 -->
                            <span v-if="node.level === 1" class="detail-bond-name">
                                {{ node.data.stockCode }}
                            </span>
                            <span v-else-if="node.level === 2" class="detail-bond-item">
                                <span @click="handleStock(node.data)">{{ node.data.stockName }}</span>
                                <i
                                    class="iconfont yh-star"
                                    v-if="node.data.isFocusStock === false"
                                    style="font-size: 14px;cursor: pointer;"
                                    @click="handleFollow(node.data.stockCode, node.data.parentId)"
                                ></i>
                                <i
                                    v-else
                                    class="iconfont yh-star-fill"
                                    style="color: #f31919; font-size: 14px;cursor: pointer;"
                                    @click="handleUnFollow(node.data.stockCode, node.data.parentId)"
                                >
                                </i>
                                <el-tooltip
                                    placement="top"
                                    :content="
                                        (node.data.deadline && Number(node.data.deadline) > 1
                                            ? (node.data.deadline || 0) + '年，'
                                            : Math.ceil(node.data.deadline * 365) + '天，') +
                                            ((node.data.yearRate || 0) + '%，') +
                                            (node.data.totalBalance || 0) +
                                            '亿'
                                    "
                                >
                                    <span
                                        >（{{
                                            node.data.deadline && Number(node.data.deadline) > 1
                                                ? (node.data.deadline || 0) + '年'
                                                : Math.ceil(node.data.deadline * 365) + '天'
                                        }}，{{ node.data.yearRate || 0 }}%，{{ node.data.totalBalance || 0 }}亿）</span
                                    >
                                </el-tooltip>
                            </span>
                        </span>
                    </vue-easy-tree>
                </div>
            </el-col>
        </el-row>
        <!-- 快速关注 -->
        <div id="dialog-box">
            <QuickAttention :visible.sync="visibleFollow" @viewDayDetail="handleConcern" ref="childMethod" />
        </div>
        <div id="dialog-box2">
            <yh-dialog title="债券详情" :visible.sync="bondDetailVisible" :close-on-click-modal="false" drag>
                <BondCalendarDetail :stockCode="bondDetailInfo.stockCode" />
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="closeBondDetailDialog"> 取 消 </el-button>
                </div>
            </yh-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import moment from 'moment';
import QuickAttention from './components/quick-attention.vue';
import BondCalendarDetail from './components/bond-calendar-detail.vue';
import VueEasyTree from '@wchbrad/vue-easy-tree';
import '@/assets/fonts/iconfont.css';

@Component({
    name: 'BondCalendar',
    components: {
        QuickAttention,
        BondCalendarDetail,
        VueEasyTree,
    },
})
export default class BondCalendar extends Vue {
    // <!-- 条件筛选卡片初始化变量 -->
    STOCK_CODE: string = ''; // 债券代码
    dateType: string = '1'; // 日期类型
    visibleFollow: boolean = false; // 快速关注弹窗
    calendarLoading: boolean = false;

    private detailLoading: boolean = false; // 右侧详情loading

    monthValue = new Date();
    monthData = []; // 每月数据
    dayDetail = {}; // 选中日期详情数据
    dayDetailShow: any[] = [];
    bondDetailVisible: boolean = false; // 债券详情显示
    bondDetailInfo: any = {}; // 债券详情
    bondCodeSelectData: any[] = []; // 债券代码下拉框
    selectLoading: boolean = false; // 债券代码Loading
    defaultExpandedKeys: any[] = ['1']; // 默认打开节点
    detailKey: number = -1; // 详情key
    popLoading: boolean = false; // 弹出框加载
    popStockList: any[] = []; // 显示的浮窗数据

    private popStockStorage: any = {}; // 日历证券集合仓库(枚举)

    mounted() {
        this.getStockCalendar();
        this.viewDayDetail('');
    }

    // 组装日历tooltip文字
    private packageTooltip(item: any): string {
        let type = item.type === '1' ? '投标' : item.type === '2' ? '缴款' : '上市';
        let deadline = item.deadline && Number(item.deadline) > 1 ? (item.deadline || 0) + '年' : Math.ceil(item.deadline * 365) + '天';
        return (
            '【' +
            type +
            '】' +
            item.stockName +
            '（' +
            item.stockCode +
            ' ' +
            deadline +
            '，' +
            (item.yearRate || 0) +
            '%，' +
            (item.totalBalance || 0) +
            '亿）'
        );
    }
    // 快速关注
    async quickFocus() {
        (this.$refs.childMethod as any).queryFocusStocks();

        // (this.$refs.childMethod as any).queryNotFocusStock();
        // (this.$refs.childMethod as any).getNotFocusStockSelect('');
        // (this.$refs.childMethod as any).getFocusStockSelect('');
        this.visibleFollow = true;
    }

    // 锚点跳转
    handleAnchor(element) {
        if (element == 'bid') {
            // 默认打开债券投标
            this.defaultExpandedKeys = ['1'];
            this.detailKey++;
        } else if (element == 'payIn') {
            this.defaultExpandedKeys = ['2'];
            this.detailKey++;
        } else if (element == 'ipo') {
            this.defaultExpandedKeys = ['3'];
            this.detailKey++;
        }

        // let skip = document.getElementById(element).offsetTop;
        // let titleHeight = document.getElementById('details-title').offsetHeight;
        // let scrollAnchor = skip - titleHeight - 18;
        // if (element === 'bid') {
        //     document.getElementById('details-content').scrollTop = 0;
        // } else {
        //     document.getElementById('details-content').scrollTop = scrollAnchor;
        // }
    }

    // 查看选中日期详情
    async viewDayDetail(data, from?: string) {
        let date = '';
        if (data) {
            date = moment(data.day).format('YYYYMMDD');
        } else {
            date = moment(this.monthValue).format('YYYYMMDD');
        }

        if (!from) {
            this.calendarLoading = true;
        } else {
            this.detailLoading = true;
        }
        this.$axios
            .post(`/stockCalendar/singleDayStockDetail/${date}`)
            .then(res => {
                this.dayDetail = res;
                let res1 = res['bidStocks'].map(item => {
                    item.key = '1' + item.stockCode;
                    item.parentId = '1';
                    item.type = '1';
                    return item;
                });
                let res2 = res['payStocks'].map(item => {
                    item.key = '2' + item.stockCode;
                    item.parentId = '2';
                    item.type = '2';
                    return item;
                });
                let res3 = res['marketStocks'].map(item => {
                    item.key = '3' + item.stockCode;
                    item.parentId = '3';
                    item.type = '3';
                    return item;
                });

                this.dayDetailShow = [
                    { key: '1', parentId: null, stockCode: '债券投标：' + res['bidStocks'].length + '只', children: res1 },
                    { key: '2', parentId: null, stockCode: '债券缴款：' + res['payStocks'].length + '只', children: res2 },
                    { key: '3', parentId: null, stockCode: '债券上市：' + res['marketStocks'].length + '只', children: res3 },
                ];
                this.popStockStorage[date] = res1.concat(res2).concat(res3);
                this.calendarLoading = false;
                this.detailLoading = false;
            })
            .catch(() => {
                this.dayDetail = {};
                this.dayDetailShow = [];
                this.calendarLoading = false;
                this.detailLoading = false;
            });
    }

    // 快速关注事件
    private handleConcern(data): void {
        // 清空仓库
        this.popStockStorage = {};
        this.viewDayDetail(data);
    }

    // 获取债券代码下拉框数据
    getBondCodeList(e: string) {
        this.selectLoading = true;
        this.$axios
            .post('/stockCalendar/stock/select', {
                dictKey: e,
                dictKeyName: e,
            })
            .then((res: any) => {
                this.bondCodeSelectData = res || [];
                this.selectLoading = false;
            })
            .catch(() => {
                this.selectLoading = false;
            });
    }

    handleBondCodeVisibleChange(val: boolean) {
        if (val && !this.bondCodeSelectData.length) {
            this.getBondCodeList('');
        }
    }

    // 输入债券代码
    changeStockCode(data) {
        // 清空仓库
        this.popStockStorage = {};
        if (this.dateType && data) return this.queryCodeDate(this.dateType, data);
    }

    // 选择日期类型
    changeDateType(type) {
        this.dateType = type;
        // 清空仓库
        this.popStockStorage = {};
        if (this.STOCK_CODE) return this.queryCodeDate(type, this.STOCK_CODE);
    }

    // 查询债券代码所在日期
    async queryCodeDate(type, stockCode) {
        this.$axios
            .post(`/stockCalendar/getDateByType/${type}/${stockCode}`)
            .then((res: any) => {
                if (res === undefined) {
                    this.$message({
                        message: '未查询到，请重新输入',
                        type: 'warning',
                    });
                } else {
                    this.monthValue = new Date(Date.parse(moment(res).format('YYYY/MM/DD')));
                    this.getStockCalendar();
                    this.viewDayDetail('');
                }
            })
            .catch(err => {
                this.$message.error(err);
            });
    }

    // 债券日历列表查询
    getStockCalendar() {
        const params = {
            startDate: moment(
                moment(this.monthValue)
                    .startOf('month')
                    .valueOf()
            ).format('YYYYMMDD'),
            endDate: moment(
                moment(this.monthValue)
                    .endOf('month')
                    .valueOf()
            ).format('YYYYMMDD'),
        };
        this.$axios
            .post('/stockCalendar/list', params)
            .then((res: any) => {
                this.monthData = res;
            })
            .catch(() => {
                this.monthData = [];
            });
    }
    // 选择月份
    changeMonth(data) {
        this.getStockCalendar();
        this.viewDayDetail('');
    }
    // 月份切换按钮
    changeMonthBtn(type) {
        if (type === 'today') {
            if (moment(this.monthValue).format('YYYYMM') === moment(new Date()).format('YYYYMM')) return this.$message.warning('已处于当前月');
            this.monthValue = new Date();
            this.getStockCalendar();
            this.viewDayDetail('');
        } else if (type === 'pre') {
            this.monthValue = new Date(this.monthValue.setMonth(this.monthValue.getMonth() - 1));
            this.getStockCalendar();
            this.viewDayDetail('');
        } else if (type === 'next') {
            this.monthValue = new Date(this.monthValue.setMonth(this.monthValue.getMonth() + 1));
            this.getStockCalendar();
            this.viewDayDetail('');
        }
    }

    // 详情-关注单个债券
    async handleFollow(stockCode, type) {
        const params = {
            stockCode,
            type,
        };
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/stockCalendar/focusSingleStock', params)
                .then((res: any) => {
                    this.getStockCalendar();
                    this.defaultExpandedKeys = [type];
                    this.viewDayDetail('');
                    resolve(res);
                    this.yh_message_success('关注成功!');
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    // 点击显示债券详情
    handleStock(row) {
        this.bondDetailInfo = JSON.parse(JSON.stringify(row));
        this.bondDetailVisible = true;
    }

    closeBondDetailDialog() {
        this.bondDetailVisible = false;
    }

    // 详情-取消关注
    handleUnFollow(stockCode, type) {
        const params = { stockCode, type };
        this.$axios
            .post('/stockCalendar/cancelSingleStock', params)
            .then((res: any) => {
                this.getStockCalendar();
                this.defaultExpandedKeys = [type];
                this.viewDayDetail('');
                this.yh_message_success('取消关注成功!');
            })
            .catch(err => {
                this.$message.error(err);
            });
    }

    getSingleStockAll(date: string) {
        date = moment(date).format('YYYYMMDD');
        // 如果仓库里有 说明之前请求过 就用仓库里的
        if (this.popStockStorage[date]) {
            this.popStockList = this.popStockStorage[date];
            return;
        }
        this.popLoading = true;
        this.$axios
            .post(`/stockCalendar/singleDayStockDetail/${date}`)
            .then(res => {
                let res1 = res['bidStocks'].filter(item => {
                    item.type = '1';
                    return item.isFocusStock;
                });
                let res2 = res['payStocks'].filter(item => {
                    item.type = '2';
                    return item.isFocusStock;
                });
                let res3 = res['marketStocks'].filter(item => {
                    item.type = '3';
                    return item.isFocusStock;
                });
                this.popStockList = res1.concat(res2).concat(res3);
                this.popStockStorage[date] = this.popStockList;
                this.popLoading = false;
            })
            .catch(() => {
                this.popStockList = [];
                this.popLoading = false;
            });
    }

    hideSingle() {
        setTimeout(() => {
            this.popStockList = [];
        }, 50);
    }
}
</script>

<style lang="scss" scoped>
// 债券日历条件查询样式
.calendar-content {
    min-width: 1100px;
}
.calendar-query {
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid #e0e6ed;
    display: flex;
    align-content: center;
    .radio-group {
        padding-left: 10px;
    }
    .switch-month {
        display: flex;
        flex-direction: column;
        // padding-left: 2em;
        .btn {
            border: 1px solid #e0e6ed;
            color: #3498ff;
            padding: 0 8px;
            cursor: pointer;
            &:nth-child(1) {
                position: relative;
                &:hover {
                    background: #f0f8fa;
                }
                &:after {
                    position: absolute;
                    content: '\4e0a\4e00\4e2a\6708';
                    left: 35px;
                    width: 60px;
                    font-size: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            &:nth-child(2) {
                padding-top: 0;
                position: relative;
                &:hover {
                    background: #f0f8fa;
                }
                &:after {
                    position: absolute;
                    content: '\4e0b\4e00\4e2a\6708';
                    left: 35px;
                    width: 60px;
                    font-size: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}
.middle {
    display: flex;
    align-items: center;
}
/deep/.el-radio .el-radio__input.is-checked + .el-radio__label,
.el-radio .el-radio__input + .el-radio__label {
    color: #409eff !important;
}
/deep/.el-radio {
    margin-right: 10px;
}
/deep/.el-input--suffix .el-input__inner {
    padding-right: 0;
}
// 日历样式
.calendar-day {
    box-sizing: border-box;
    padding: 8px;
    height: 100%;
    position: relative;
    .bond-number {
        .bond-number-item {
            font-size: 12px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            span {
                font-size: 12px;
                text-decoration: underline;
                color: #4ba4fa;
            }
        }
    }
    .follow-mark-box {
        height: 50%;
        overflow: hidden;
        .follow-logo {
            span {
                font-size: 12px;
                color: #4ba4fa;
                display: block;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                &:hover {
                    overflow: none;
                }
            }
        }
    }
    .follow-mark-popover {
        padding: 10px;
        background-color: #ffff;
        position: absolute;
        top: 110px;
        border-radius: 4px;
        filter: drop-shadow(0px 0px 1px rgb(20, 20, 20));
        .follow-mark-popover-arrow {
            position: absolute;
            top: -10px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 10px solid #ffff;
            font-size: 0;
            line-height: 0;
        }
    }
}
.is-selected {
    // background: #E2EFDB;
    background: rgba($color: pink, $alpha: 0.4);
}
.calendar-arrow-left {
    position: absolute;
    left: 28px;
    top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #ffff;
}
.calendar-arrow-right {
    position: absolute;
    right: 28px;
    top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #ffff;
}
/deep/.el-calendar__header {
    display: none;
}
/deep/.el-calendar-table thead {
    height: 30px;
    line-height: 30px;
    background: #2f74b5;
}
/deep/.el-calendar-table {
    &:not(.is-range) {
        //使不是本月的日期不可点击，不会跳转到其他月份
        td.next {
            pointer-events: none;
        }
        td.prev {
            pointer-events: none;
        }
    }
}
/deep/.prev > .el-calendar-day > p {
    display: none;
}
/deep/.next > .el-calendar-day > p {
    display: none;
}
/deep/.el-calendar-table thead th {
    padding: 0;
    color: #ffff;
    font-size: 16px;
}
/deep/.el-calendar-table thead th:before {
    content: '\5468';
}
/deep/.el-calendar__body {
    padding-top: 0;
    margin-top: 20px;
}
/deep/.el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    height: 160px;
    padding: 0;
}
/deep/.el-calendar-table td.is-today {
    background: #e2efdb !important;
    color: black;
    .is-selected {
        background: none;
    }
}
// 债券信息详情样式
.details {
    margin-top: 20px;
    background: rgba(37, 137, 245, 0.1);
    // height: 675px;
    .details-title {
        height: 30px;
        line-height: 30px;
        background: #2f74b5;
        font-size: 16px;
        text-align: center;
        color: #ffff;
    }
    .details-content {
        padding-left: 4px;
        // height: calc(100% - 30px);
        overflow-y: scroll;
        .detail-date {
            padding: 10px 0 20px 0;
            span {
                padding-right: 1em;
            }
        }
        .detail-bond-name {
            color: rgb(208, 165, 14);
            font-size: 12px;
        }
        .detail-bond-item {
            display: block;
            width: 13vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            span {
                cursor: pointer;
                font-size: 12px;
                &:nth-of-type(1) {
                    text-decoration: underline;
                    color: #4ba4fa;
                }
            }
        }
        //

        /deep/ .el-tree-node__content span {
            min-width: 0px !important;
        }
    }
}
#dialog-box {
    // 弹框dialog
    /deep/ .el-dialog__body {
        max-height: 100vh !important;
        // width: 1000px;
    }
}
#dialog-box2 {
    /deep/ .el-dialog {
        width: fit-content;
        .el-dialog__body {
            width: 1340px;
            padding: 10px;
            max-height: 100vh !important;
        }
    }
}

/deep/ .vxe-cell {
    padding-left: 0px;
    height: 20px !important;
    line-height: 20px !important;
}
/deep/ .vxe-tree-cell {
    padding-left: 6px;
}
</style>
<style lang="scss">
// 日期关注债券弹框
.tips-popover {
    min-width: 200px;
    // max-height: 150px;
    // overflow: auto;
    padding: 0;
    border: 0;
    .popper__arrow,
    .popper__arrow::after {
        // border-right-color: #272c36 !important;
        border-bottom-color: #272c36 !important;
        border-top-color: #272c36 !important;
    }
}

.vxe-list {
    background: #272c36;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    .vxe-list--body {
        padding: 0 6px 2px 2px;

        .my-list-item {
            span {
                font-size: 12px;
            }
        }
    }
    .vxe-list--virtual-wrapper {
        min-height: 20px;
        height: fit-content;
        max-height: 150px;
    }

    // loading text icon
    .el-loading-spinner {
        margin-top: -10px;

        .el-loading-text {
            display: inline;
            font-size: 12px;
        }
    }
    // loading遮罩层
    .el-loading-mask {
        border-radius: 4px;
    }
}
</style>
